<template>
    <div
        class="bg-[#1e1e1f] px-5 py-5 md:px-12 md:py-10 text-left border border-[#383838] rounded-3xl text-amber-50 mx-3 mb-5">
        <article>
            <header>
                <div class="text-2xl font-bold text-white mb-5 fadein-bot title-section flex items-center">
                    About Me &nbsp;
                    <div class="h-[1px] w-32 bg-amber-200 md:w-96 aos-init aos-animate" data-aos="zoom-in-left"
                        data-aos-duration="600"></div>
                </div>
            </header>

            <section class="text-sm md:text-lg text-justify flex flex-col gap-4 md:flex-row md:gap-8 md:justify-left md:items-center">
                <div class="flex justify-center">
                    <img class="w-9/12 rounded-full mb-3 fadein-up pict"
                        src="https://i1.sndcdn.com/avatars-000214125831-5q6tdw-t500x500.jpg" alt="Foto">
                </div>
                <div class="md:w-7/12 flex flex-col items-center">
                    <div class="content-container">
                        <div v-if="currentPage === 2">
                            <ul class="mb-3 md:mb-7 fadein-left fadeins-1">
                                <li class="bg-clip-text bg-gradient-to-r from-slate-100 to-amber-300 text-transparent">· Hi! 我是刘楚轩，一位拥有1年后端与上位机开发工作经验的开发者</li>
                                <li class="bg-clip-text bg-gradient-to-l from-slate-100 to-amber-300 text-transparent">· 00后 23年毕业 本科专业是物联网工程 热爱网站与软件开发</li>
                                <li class="bg-clip-text bg-gradient-to-r from-slate-100 to-amber-300 text-transparent">· 正在持续学习中 追求自身综合素养的不断提高</li>
                                <li class="bg-clip-text bg-gradient-to-l from-slate-100 to-amber-300 text-transparent">· 热衷于学习技术类知识，追求合理的架构设计而不断充实和提高自己</li>
                                <li class="bg-clip-text bg-gradient-to-r from-slate-100 to-amber-300 text-transparent">· 立志写出优美高效的代码，对新技术有强烈的学习欲望</li>
                                <li class="bg-clip-text bg-gradient-to-l from-slate-100 to-amber-300 text-transparent">· 喜欢研究各种新功能的实现，热衷于从攻克难题的成就感，用代码实现有趣的想法</li>
                            </ul>
                            <ul class="mb-3 md:mb-7 fadein-left fadeins-2">
                                <li class="bg-clip-text bg-gradient-to-r from-slate-100 to-amber-300 text-transparent">· 对新技术怀有高度渴望，积极寻找学习更多知识的乐趣</li>
                                <li class="bg-clip-text bg-gradient-to-l from-slate-100 to-amber-300 text-transparent">· 喜欢分享自己的作品代码和自己的学习过程</li>
                                <li class="bg-clip-text bg-gradient-to-r from-slate-100 to-amber-300 text-transparent">· 认为生活是平和与冒险轮替反复的，平和是为了冒险做沉淀，等待突破</li>
                                <li class="bg-clip-text bg-gradient-to-l from-slate-100 to-amber-300 text-transparent">· 追求自己的兴趣和激情，让每一天都充满活力和乐趣</li>
                                <li class="bg-clip-text bg-gradient-to-r from-slate-100 to-amber-300 text-transparent">· 喜欢写代码，玩游戏，运动。我的生活才刚刚开始，充满了无限可能性......</li>
                                <li class="bg-clip-text bg-gradient-to-l from-slate-100 to-amber-300 text-transparent">· 如果你有任何关于技术交流或者生活分享的想法</li>
                                <li class="bg-clip-text bg-gradient-to-r from-slate-100 to-amber-300 text-transparent">· 欢迎与我交流，一同探讨，共同成长！</li>
                            </ul>
                        </div>
                        <div v-if="currentPage === 1" class="items-center w-full flex flex-col mb-3 md:mb-7 fadein-left fadeins-1">
                            <article class="min-h-116 bg-orange-600 max-w-xl w-full rounded-xl text-gray-100 bg-cover bg-center transform duration-500 hover:-translate-y-1 cursor-pointer" style="background-image: url(https://images.unsplash.com/photo-1614527333177-d27e9e29ff98?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=950&q=80);">
                                <div class="bg-black bg-opacity-60 p-10 rounded-xl h-full">
                                    <h1 class="mt-3 text-3xl text-gray-100 leading-snug  min-h-33">Personal Information
                                    </h1>
                                    <div class="mt-8">
                                        <span class="text-x">Name - 刘楚轩</span><br>
                                        <span class="text-x">Gender - 男</span><br>
                                        <span class="text-x">Age - 24</span><br>
                                        <span class="text-x">Desired Position - 后端开发/上位机开发</span><br>
                                        <span class="text-x">Current Residential Address - 苏州 吴中区</span><br>
                                        <span class="text-x">Phone - 15847746361</span><br>
                                        <span class="text-x">Email - 1649679194@qq.com</span><br>
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                    <div class="button-container mt-4">
                        <button @click="showPage(1)" :class="{ 'hidden': currentPage === 1 }" class="pagination-button">上一页</button>
                        <button @click="showPage(2)" :class="{ 'hidden': currentPage === 2 }" class="pagination-button">下一页</button>
                    </div>
                </div>
            </section>
        </article>
    </div>

    <div class="px-5 py-5 md:px-12 md:py-10 text-left text-amber-50 mx-3">
        <article data-page="about">
            <header>
                <div class="text-2xl font-bold text-white mb-5 fadein-bot title-section flex items-center">
                    <div class="h-[1px] w-10 bg-amber-200 md:w-20 aos-init aos-animate" data-aos="zoom-in-left"
                         data-aos-duration="600"></div>
                    &nbsp; Skills
                </div>
            </header>
            <section>
                <div>
                    <ul class="flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400 mb-5">
                        <li class="mr-2">
                            <button class="inline-block px-4 py-3 rounded-lg hover:text-white"
                                    :class="{ 'text-amber-200 bg-amber-200 bg-opacity-10': activeTab === 1 }"
                                    @click="activeTab = 1">Tech Stack
                            </button>
                        </li>
                        <li class="mr-2">
                            <button class="inline-block px-4 py-3 rounded-lg hover:text-white"
                                    :class="{ 'text-amber-200 bg-amber-200 bg-opacity-10': activeTab === 2 }"
                                    @click="activeTab = 2">Tools
                            </button>
                        </li>
                    </ul>
                </div>
                <div v-show="activeTab === 1">
                    <div class="p-4">
                        <SkillProgress skillName="C#/.Net" iconUrl="/icons/ccppIcon.png" :percentage="80" />
                        <div class="grid grid-cols-2 gap-4 pb-32 md:grid-cols-3 md:gap-8 xl:grid-cols-4 xl:gap-10 2xl:gap-12">
                            <div v-for="item in netTech" :key="item.id">
                                <div
                                        class="item-tech flex cursor-pointer items-center gap-2 rounded border border-amber-200 px-2 py-2 hover:bg-amber-200 hover:bg-opacity-10 md:gap-3 lg:px-3">
                                    <div class="flex h-12 w-12 items-center justify-center p-0 lg:h-16 lg:w-16 lg:p-2 zoom-in" v-if="item.iconPath">
                                        <img alt="HTML" loading="lazy" width="32" height="32" decoding="async" data-nimg="1"
                                            class="img-tech drop-shadow-xl transition-all duration-300 h-[65%] w-[65%] lg:h-[85%] lg:w-[85%]  "
                                            :src="encodeURI(item.iconPath)" style="color: transparent;">
                                    </div>
                                    <div class="flex items-center text-sm md:text-base lg:text-lg">
                                        <div class="tech font-medium text-secondary transition-all duration-300 translate-y-0 ">
                                            {{ item.techName }}
                                        </div>
                                        <div
                                                class="status-tech opacity-0 absolute mt-5 text-[10px] text-amber-200 transition-all duration-300 md:text-xs lg:text-sm">
                                            {{ item.techDescription }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <SkillProgress skillName="DataBase" iconUrl="/icons/databaseIcon.png" :percentage="80" />
                        <div class="grid grid-cols-2 gap-4 pb-32 md:grid-cols-3 md:gap-8 xl:grid-cols-4 xl:gap-10 2xl:gap-12">
                            <div v-for="item in dataBaseTech" :key="item.id">
                                <div
                                        class="item-tech flex cursor-pointer items-center gap-2 rounded border border-amber-200 px-2 py-2 hover:bg-amber-200 hover:bg-opacity-10 md:gap-3 lg:px-3">
                                    <div class="flex h-12 w-12 items-center justify-center p-0 lg:h-16 lg:w-16 lg:p-2 zoom-in" v-if="item.iconPath">
                                        <img alt="HTML" loading="lazy" width="32" height="32" decoding="async" data-nimg="1"
                                            class="img-tech drop-shadow-xl transition-all duration-300 h-[65%] w-[65%] lg:h-[85%] lg:w-[85%]  "
                                            :src="item.iconPath" style="color: transparent;">
                                    </div>
                                    <div class="flex items-center text-sm md:text-base lg:text-lg">
                                        <div class="tech font-medium text-secondary transition-all duration-300 translate-y-0 ">
                                            {{ item.techName }}
                                        </div>
                                        <div
                                                class="status-tech opacity-0 absolute mt-5 text-[10px] text-amber-200 transition-all duration-300 md:text-xs lg:text-sm">
                                            {{ item.techDescription }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <SkillProgress skillName="Front-end Development" iconUrl="/icons/webIcon.png" :percentage="50" />
                    <div class="grid grid-cols-2 gap-4 pb-32 md:grid-cols-3 md:gap-8 xl:grid-cols-4 xl:gap-10 2xl:gap-12">
                        <div v-for="item in webTech" :key="item.id">
                            <div
                                    class="item-tech flex cursor-pointer items-center gap-2 rounded border border-amber-200 px-2 py-2 hover:bg-amber-200 hover:bg-opacity-10 md:gap-3 lg:px-3">
                                <div class="flex h-12 w-12 items-center justify-center p-0 lg:h-16 lg:w-16 lg:p-2 zoom-in" v-if="item.iconPath">
                                    <img alt="HTML" loading="lazy" width="32" height="32" decoding="async" data-nimg="1"
                                         class="img-tech drop-shadow-xl transition-all duration-300 h-[65%] w-[65%] lg:h-[85%] lg:w-[85%]  "
                                         :src="item.iconPath" style="color: transparent;">
                                </div>
                                <div class="flex items-center text-sm md:text-base lg:text-lg">
                                    <div class="tech font-medium text-secondary transition-all duration-300 translate-y-0 ">
                                        {{ item.techName }}
                                    </div>
                                    <div
                                            class="status-tech opacity-0 absolute mt-5 text-[10px] text-amber-200 transition-all duration-300 md:text-xs lg:text-sm">
                                        {{ item.techDescription }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <SkillProgress skillName="Java" iconUrl="/icons/javaIcon.png" :percentage="70" />
                    <div class="grid grid-cols-2 gap-4 pb-32 md:grid-cols-3 md:gap-8 xl:grid-cols-4 xl:gap-10 2xl:gap-12">
                        <div v-for="item in javaTech" :key="item.id">
                            <div
                                    class="item-tech flex cursor-pointer items-center gap-2 rounded border border-amber-200 px-2 py-2 hover:bg-amber-200 hover:bg-opacity-10 md:gap-3 lg:px-3">
                                <div class="flex h-12 w-12 items-center justify-center p-0 lg:h-16 lg:w-16 lg:p-2 zoom-in" v-if="item.iconPath">
                                    <img alt="HTML" loading="lazy" width="32" height="32" decoding="async" data-nimg="1"
                                        class="img-tech drop-shadow-xl transition-all duration-300 h-[65%] w-[65%] lg:h-[85%] lg:w-[85%]  "
                                        :src="item.iconPath" style="color: transparent;">
                                </div>
                                <div class="flex items-center text-sm md:text-base lg:text-lg">
                                    <div class="tech font-medium text-secondary transition-all duration-300 translate-y-0 ">
                                        {{ item.techName }}
                                    </div>
                                    <div
                                            class="status-tech opacity-0 absolute mt-5 text-[10px] text-amber-200 transition-all duration-300 md:text-xs lg:text-sm">
                                        {{ item.techDescription }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-show="activeTab === 2">
                    <div class="grid grid-cols-2 gap-4 pb-32 md:grid-cols-3 md:gap-8 xl:grid-cols-4 xl:gap-10 2xl:gap-12">
                        <div v-for="item in tools" :key="item.id">
                            <div
                                    class="item-tech flex cursor-pointer items-center gap-2 rounded border border-amber-200 px-2 py-2 hover:bg-amber-200 hover:bg-opacity-10 md:gap-3 lg:px-3">
                                <div class="flex h-12 w-12 items-center justify-center p-0 lg:h-16 lg:w-16 lg:p-2 zoom-in">
                                    <img alt="HTML" loading="lazy" width="32" height="32" decoding="async" data-nimg="1"
                                         class="img-tech drop-shadow-xl transition-all duration-300 h-[65%] w-[65%] lg:h-[85%] lg:w-[85%]  "
                                         :src="item.iconPath" style="color: transparent;">
                                </div>
                                <div class="flex items-center text-sm md:text-base lg:text-lg">
                                    <div class="tech font-medium text-secondary transition-all duration-300 translate-y-0 ">
                                        {{ item.techName }}
                                    </div>
                                    <div
                                            class="status-tech opacity-0 absolute mt-5 text-[10px] text-amber-200 transition-all duration-300 md:text-xs lg:text-sm">
                                        {{ item.techDescription }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </article>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import SkillProgress from '../components/SkillProgress.vue';
import {getTechByGroupId} from '../api/tech.js';

export default {
  name: 'App',
  components: {
    SkillProgress,
  },
  setup() {
    const currentPage = ref(1);
    const activeTab = ref(1);

    const javaTech = ref([]);
    const webTech = ref([]);
    const netTech = ref([]);
    const dataBaseTech = ref([]);
    const tools = ref([]);

    const showPage = (page) => {
      currentPage.value = page;
    };

    const fetchTechData = async () => {
      try {
        //1C# 2Web 3DataBase 4Java 0Tools
        const javaTechData = await getTechByGroupId(4);
        const webTechData = await getTechByGroupId(2);
        const netTechData = await getTechByGroupId(1);
        const dataBaseTechData = await getTechByGroupId(3);
        const toolTechesData = await getTechByGroupId(0);

        javaTech.value = javaTechData;
        webTech.value = webTechData;
        netTech.value = netTechData;
        dataBaseTech.value = dataBaseTechData;
        tools.value = toolTechesData;

      } catch (error) {
        console.error('获取技术数据失败:', error);
      }
    };

    onMounted(() => {
      fetchTechData();
    });

    return {
      currentPage,
      activeTab,
      javaTech,
      webTech,
      netTech,
      dataBaseTech,
      tools,
      showPage,
    };
  },
};
</script>



<style>
    .fadein-left {
        opacity: 0;
        font-size: 1.1rem;
        line-height: 2.2rem;
        animation: fadeInLeft 0.5s ease-out forwards;
    }

    @keyframes fadeInLeft {
        0% {
            opacity: 0;
            transform: translateX(100%);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .fadeins-1 {
        animation-delay: 500ms;

    }

    .fadeins-2 {
        animation-delay: 800ms;
    }

    .img-tech,
    .tech {
        transition: transform 0.3s ease;
    }

    .item-tech:hover .img-tech {
        transform: scale(1.3);
    }

    .item-tech:hover .tech {
        transform: translateY(-12px);
    }

    .item-tech:hover .status-tech {
        opacity: 1;
    }
    .pict {
        box-shadow: 0px 0px 43px -9px rgba(255, 219, 112, 0.44);

    }

    .about-me-container {
        background-color: #1e1e1f;
        color: #ffc107;
        padding: 20px;
        border: 1px solid #383838;
        border-radius: 20px;
    }
    .title-section {
        display: flex;
        align-items: center;
    }
    .title-section h2 {
        margin-right: 10px;
        color: white;
    }
    .about-me-item {
        background-clip: text;
        background: linear-gradient(to right, #f8f9fa, #ffc107);
        -webkit-background-clip: text;
        color: transparent;
        white-space: pre-line;
    }
    .about-me-row .avatar-col {
        float: left;
        overflow: hidden;
    }

    .pagination-button {
        background-color: #383838;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .pagination-button:hover {
        background-color: #ffcc00;
    }

    .pagination-button:focus {
        outline: none;
    }
    .content-container {
        width: 100%;
        max-width: 600px;
        height: 450px;
        overflow-y: auto;
        padding: 20px;
        background-color: #1e1e1f;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .button-container {
        display: flex;
        justify-content: center;
        gap: 20px;
        width: 100%;
    }
</style>
